<template>
  <!-- 责任人选择（根据分公司id） -->
  <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" :optionFilterProp="optionFilterProp" v-model="currentValue" allowClear>
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="i in list" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
  </a-select>
</template>
<script>
import { getOrgUsers } from '@/api/commons'
import Vue from 'vue'

export default {
  name: 'SelectDutyPeople',
  inheritAttrs: false,
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object],
    },
    // 分公司id
    id: [String, Number],
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      },
    },
    // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索,否则为value
    optionFilterProp: {
      type: String,
      default: () => 'children',
    },
  },
  data() {
    return {
      fetching: false,
      list: [],
    }
  },
  mounted() {
    this.getList({ orgIds: this.id })
  },
  methods: {
    getList(params) {
      this.fetching = true
      getOrgUsers(params)
        .then((res) => {
          this.fetching = false
          if (res.data?.length > 0) {
            this.list = res.data
            this.$emit('update:list', res.data)
          }
        })
        .catch((res) => {
          this.fetching = false
        })
    },
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      },
    },
  },
}
</script>
